<template>
	<Container>
		<view class="header">
			<view class="article" v-if="isArticleShow">
				<view
					v-for="(item, index) in assignment.optionArticles[current].items"
					:class="{ articleLight: chooses[index] === 'select' }"
					:key="index"
					@tap="tap(item, index)"
					hover-class="touch"
					hover-stay-time="300"
				>
					<image
						class="img image"
						v-if="isShape"
						:style="{ filter: color[item.colorText] }"
						:src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(item.shapeText) + '.png'"
						mode="aspectFit"
					></image>
					<image class="img image" v-if="!isShape" :src="item.imageUrl" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="option" :class="{ error: isFail }">
			<view v-for="(item, index) in isOptionList" :key="index">
				<image
					class="img image"
					v-if="isShape"
					:style="{ filter: color[item.colorText] }"
					:src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(item.shapeText) + '.png'"
					mode="aspectFit"
				></image>
				<image class="img image" v-if="!isShape" :src="item.imageUrl" mode="aspectFit"></image>
			</view>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { times } from '../../../common/mixins/assignmentTimes.js'
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins, times],
	components: { Question, Container },
	data() {
		return {
			isFail: false
		}
	},
	computed: {
		color() {
			return this.config.shapeColor
		},
		isShape() {
			return this.assignment.optionArticles[this.current].type === 'shape'
		},
		isOptionList() {
			return this.assignment.optionArticles[this.current].items.filter(item => {
				return item.isMatched
			})
		}
	},
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			const count = this.assignment.optionArticles[this.current].items.filter(item => {
				return item.isMatched
			}).length
			if (this.choosesKey.length === count) return
			this.questionPause()
			this.optionStatus('select', index)
			this.choosesKey.push(item.isMatched)
			if (this.choosesKey.length === count) {
				const isSure = this.choosesKey.every(item => {
					return item
				})
				if (!isSure) this.isFail = true
				this.isSureList.push(isSure)
				const timer = setTimeout(() => {
					this.isFail = false
					this.next()
				}, 1500)
				this.$once('hook:beforeDestory', function() {
					clearTimeout(timer)
				})
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 55vh
	width 720rpx
	max-width 55vh
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 5vh 0
	position relative
	.article
		animation outIn 0.4s
		display flex
		justify-content center
		align-items center
		flex-wrap wrap
		height 55vh
		view
			width 20%
			height 20%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			position relative
			filter drop-shadow(5rpx 5rpx 5rpx #c4c4c4)
			.image
				width 80%
				height 80%
.option
	width 30vh
	height 15vh
	border 8rpx solid #FF9A72
	box-sizing border-box
	border-radius 50rpx
	display flex
	align-items center
	justify-content center
	margin 8vh auto
	view
		width 50%
		height 100%
		display flex
		align-items center
		justify-content center
		image
			width 80%
			height 80%
</style>
